<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>10 如何获取事件对象</title>
		<style type="text/css">
			#box {
				width: 300px;
				height: 100px;
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<a href="javascript:void(0);"></a>
		<div id='box'></div>
		<script type="text/javascript">
			// 1.如何获取事件对象
			// 2.事件目标
			// 3.事件代理
			// 4.事件冒泡
			// 5.事件流阶段 eventPhase
			// 6.取消默认事件

			// 兼容性
			window.onload = function() {
				var box = document.getElementById('box');
				// 1.event对象是事件处理程序的第一个参数 ie8浏览器不兼容
				// ie8浏览器得到的结果是undefined,其它浏览器[object MouseEvent]
				/* box.onclick = function (e){
					this.innerHTML = e;
					
				} */
				// 2.直接可以使用event变量 火狐浏览器低版本获取出来的是undefined
				/* box.onclick = function() {
					this.innerHTML = event;
				} */
				
				// 兼容性代码
				box.onclick = function(e){
					console.log(e);
					// 兼容性写法
					e = e || window.event;
					box.innerHTML = e;
				}
			}
		</script>
	</body>
</html>
